<template>
  <div>
<div>
    <!-- Form -->
    <!-- <el-button type="primary" @click="dialogFormVisible = true" id="add">增加房间类型</el-button> -->

    <el-dialog title="增加房型" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="类型名称" :label-width="formLabelWidth">
          <el-input v-model="form.type_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="可住人数" :label-width="formLabelWidth">
          <el-input v-model="form.type_num" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"  @click="addType">确 定</el-button>
      </div>
    </el-dialog>
  </div>


    <div>
    <el-dialog title="修改房型" :visible.sync="dialogFormVisible1">
      <el-form :model="form">
        <el-form-item label="类型名称" :label-width="formLabelWidth">
          <el-input v-model="form1.type_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="可住人数" :label-width="formLabelWidth">
          <el-input v-model="form1.type_num" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary"  @click="setType">确 定</el-button>
      </div>
    </el-dialog>
    </div>

    <center>
      <el-table
        :data="tableData"
        stripe
        style="width: 610px">
        <el-table-column
          prop="type_id"
          label="id"
          width="120"
          align="center"
          >
        </el-table-column>

        <el-table-column
          prop="type_name"
          label="类型名"
          width="120"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="type_num"
          label="房间人数"
          width="120"
          align="center"
          >
        </el-table-column>
        <el-table-column label="操作" align="center" width="240">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
               @click="selTypeById(scope.row)" id="set" v-model="typeupdbtn" v-if="typeupdshow">修改</el-button>
            <!-- <el-button
              size="mini"
              type="danger"
              @click="delType(scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </center>
  </div>

</template>

<script>
export default {
  methods:{
    setType(){

      this.$axios
        .post("/setType", {
          type_id:this.form1.type_id,
          type_name:this.form1.type_name,
          type_num :this.form1.type_num,
        })
        .then((res) => {
          this.dialogFormVisible1=false;
          this.form.type_name='';
          this.form.type_num='';
          this.loadData();
        })
        .catch((error) => {

        });
    },
    selTypeById(item){
      var id = item.type_id;
     this.dialogFormVisible1=true;
      this.$axios
        .get("/selTypeById",{
          params:{
            type_id: id
          }
        })
        .then((res) => {
          this.form1.type_name = res.data.data.type_name;
          this.form1.type_num = res.data.data.type_num;
          this.form1.type_id = res.data.data.type_id;
        })
        .catch((error) => {

        });
    },
    delType(item){
      var id = item.type_id;
      this.$axios
        .get("/delByIdr",{

          params:{
            type_id: id
          }
        })

        .then((res) => {

          this.loadData();
        })
        .catch((error) => {

        });
    },
    loadData() {
      this.$axios
        .get("/roomtype", {

        })
        .then((res) => {
          this.tableData = res.data.data;
                    setTimeout(() => {
            //设置默认选中项
            this.login();
          }, 0);
        })
        .catch((error) => {

        });

    },
    addType() {
      this.$axios
        .post("/addType", {
            type_id:'',
            type_name:this.form.type_name,
            type_num :this.form.type_num,
        })
        .then((res) => {
          this.dialogFormVisible=false;
          this.form.type_name='';
          this.form.type_num='';
          this.loadData();
        })
        .catch((error) => {

        });

    },
    login(){
      var l = sessionStorage.getItem("permission_list");
      var list = l.split(',');
      list.forEach((item)=>{
        if(item == this.typeupdbtn){
          this.typeupdshow = true;
        }
      })
    }
  },
  data(){
    return{
      tableData:[

      ],
      typeupdbtn:'37',
      typeupdshow:false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        type_name:'',
        type_num:''
      },
      form1: {
        type_name:'',
        type_num:'',
        type_id:''
      },
      formLabelWidth: '120px'
    }
  },
  mounted(){

    this.loadData();
  },
}
</script>

<style scoped>

</style>
